<script setup>
import { formatDate } from "@/utils/";
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  columns: {
    type: Array,
    default: [],
  },
});

const emit = defineEmits(["handleEdit", "handleDel"]);
// 编辑
const editData = (id) => {
  emit("handleEdit", id);
};
// 删除
const delData = (id) => {
  emit("handleDel", id);
};
</script>

<template>
  <el-table :data="list" border stripe>
    <el-table-column
      v-for="col in columns"
      :prop="col.prop"
      :label="col.label"
      :width="col.width"
    >
      <!-- 小区、栋数、房产名称 -->
      <template v-if="col.type === 'position'" #default="{ row, column }">
        {{ row[column.property]?.name || "未知" }}
      </template>
      <!-- 图片 -->
      <template v-if="col.type === 'picture'" #default="{ row, column }">
        <ImagePreview :src="row[column.property]"></ImagePreview>
      </template>
      <!-- 时间 -->
      <template v-if="col.type === 'time'" #default="{ row, column }">
        {{ formatDate(row[column.property]) || "-" }}
      </template>
      <!-- 状态、标签、多选框等自定义 -->
      <template #default="{ row }">
        <slot name="otherType" :data="col.prop" :row="row">
          {{ row[col.prop] }}
        </slot>
      </template>
      <template v-if="col.type === 'action'" #default="{ row }">
        <el-button type="text" size="default" @click="editData(row.id)"
          >编辑</el-button
        >
        <el-popconfirm title="确定删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="text">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped></style>
